<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>The portfolio of Boriana Giormova</title>

<link rel="stylesheet" href="css/reset.css" type="text/css"  />
<link rel="stylesheet" href="css/960.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

<script src="js/html5.js"></script>
<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script>
<script src="js/jquery.localscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jslickmenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>

<script type="text/javascript" src="turn/turn.js"></script>
<link rel="stylesheet" type="text/css" href="turn/turn.css">

</head>

<body>       

 
<div id="logo">
	<img src="images/limb-logo1.png" alt="Limb logo"/>
	<div id="logo-background"></div>
</div>

<div class="container_12">
	<div id="header" class="grid_12">
			<p>The portfolio of Boriana Giormova</p>
	</div>
	<!-- end .grid_12 -->
	<div class="clear"></div>

<div id="slider" class="grid_12">
  <ul class="navigation" id="kategorii">
    <li><a href="#identity">Identity</a></li>
    <li><a href="#poster">Poster</a></li>
    <li><a href="#illustration">Illustration</a></li>
    <li><a href="#website">Website</a></li>
    <li><a href="#other">Other</a></li>
  </ul>

  <!-- element with overflow applied -->
  <div class="scroll">
    <!-- the element that will be scrolled during the effect -->
    <div class="scrollContainer">
      <!-- our individual panels -->
      <div class="panel" id="identity"> 
      		
<?php

if ($handle = opendir('images/identity')) {
    $counter = 4;
    while (false !== ($file = readdir($handle))) {
		if (strcmp($file,".") != 0 && strcmp($file,"..") != 0 && strcmp($file,"thumbnails") != 0) {
        	if ($counter == 0){
				echo '<div class="clear"></div>';
				$counter = 4;
			}
			echo '<div class="grid_3">';
			echo '<a href="images/identity/'.$file.'" rel="prettyPhoto[pp_gal]">';
			echo '<img src="images/identity/thumbnails/'.$file.'">';
			echo '</a>';
			echo '</div>';
			$counter--;
		}
    }
    closedir($handle);
}
?>
    
       </div>
       <div class="panel" id="poster"> 
      		
<?php

if ($handle = opendir('images/poster')) {
    $counter = 4;
    while (false !== ($file = readdir($handle))) {
		if (strcmp($file,".") != 0 && strcmp($file,"..") != 0 && strcmp($file,"thumbnails") != 0) {
        	if ($counter == 0){
				echo '<div class="clear"></div>';
				$counter = 4;
			}
			echo '<div class="grid_3">';
			echo '<a href="images/poster/'.$file.'" rel="prettyPhoto[pp_gal]">';
			echo '<img src="images/poster/thumbnails/'.$file.'">';
			echo '</a>';
			echo '</div>';
			$counter--;
		}
    }
    closedir($handle);
}
?>
    
       </div>
      <div class="panel" id="illustration">

<?php

if ($handle = opendir('images/illustration')) {
    $counter = 4;
    while (false !== ($file = readdir($handle))) {
		if (strcmp($file,".") != 0 && strcmp($file,"..") != 0 && strcmp($file,"thumbnails") != 0) {
        	if ($counter == 0){
				echo '<div class="clear"></div>';
				$counter = 4;
			}
			echo '<div class="grid_3">';
			echo '<a href="images/illustration/'.$file.'" rel="prettyPhoto[pp_gal]">';
			echo '<img src="images/illustration/thumbnails/'.$file.'">';
			echo '</a>';
			echo '</div>';
			$counter--;
		}
    }
    closedir($handle);
}
?>

	  </div>
      <div class="panel" id="website"> 

<?php

if ($handle = opendir('images/website')) {
    $counter = 4;
    while (false !== ($file = readdir($handle))) {
		if (strcmp($file,".") != 0 && strcmp($file,"..") != 0 && strcmp($file,"thumbnails") != 0) {
        	if ($counter == 0){
				echo '<div class="clear"></div>';
				$counter = 4;
			}
			echo '<div class="grid_3">';
			echo '<a href="images/website/'.$file.'" rel="prettyPhoto[pp_gal]">';
			echo '<img src="images/website/thumbnails/'.$file.'">';
			echo '</a>';
			echo '</div>';
			$counter--;
		}
    }
    closedir($handle);
}
?>

	 </div>
      <div class="panel" id="other"> 

<?php

if ($handle = opendir('images/other')) {
    $counter = 4;
    while (false !== ($file = readdir($handle))) {
		if (strcmp($file,".") != 0 && strcmp($file,"..") != 0 && strcmp($file,"thumbnails") != 0) {
        	if ($counter == 0){
				echo '<div class="clear"></div>';
				$counter = 4;
			}
			echo '<div class="grid_3">';
			echo '<a href="images/other/'.$file.'" rel="prettyPhoto[pp_gal]">';
			echo '<img src="images/other/thumbnails/'.$file.'">';
			echo '</a>';
			echo '</div>';
			$counter--;
		}
    }
    closedir($handle);
}
?>

	 </div>
    </div>
  </div>
</div>

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto({
					overlay_gallery: false,
					show_title: false,
					theme: 'facebook' /* light_rounded / dark_rounded / light_square / dark_square / facebook */
				});			
		});
</script>
	
	<div class="clear"></div>
	<!-- <div class="grid_12">
		<p>
			Footer
		</p>
	</div>   -->
	<!-- end .grid_12 -->
	
	<img id="target" src="turn/code.png">

<script>
	  $(document).ready(function(){
    $( '#target' ).fold();
  });
</script>

<script>
	$("#kategorii").jSlickmenu();
</script>

</div> <!-- container 12 end -->
</body>
</html>
